Skip to main content

yQRCode

Description

The yQRCode is a scannable code that is typically used to store URLs or other information that can be read by a smartphone's camera. The yQRCode is versatile and can be used for:

  • Quickly directing users to websites
  • Simplifying the check-in process at events
  • Sharing Wi-Fi credentials effortlessly

Basic Structure

The basic structure of the yQRCode includes customizable options such as the QR code's color, size, and the actual data encoded within it. For the general structure of a yComponent, refer to the yBase-components basic-structure.

QrCode structure

Properties

Through its various properties the yQRCode can be configured to suit your needs. The display below provides you with an overview of all the yQRCode properties.

Properties can be changed directly through three methods:

  • Inside the Toolbar, which is positioned in your workarea next to your component right where you need it. It shows the most important properties, thus providing a fast and efficient way to configure your component in the most basic way.
  • It may also occur in the Toolbar Extension, which is a seamless extension accesible as a dropdown item of the Toolbar. It extends the functionality of the Toolbar by providing advanced pickers for the most used properties.
  • Inside the Detail Panel, which is located in the righthand drawer. Every property of a component can be configured here.
METAread more
--y-q-r-code__component-id

The identifier of the component that is unique within a page.

--y-q-r-code__component-type

The type of the component. For this component it is -q-r-code.

--y-q-r-code__name

The custom name of the component. It serves for better identification of the component.

--y-q-r-code__version

The custom version of the QRCode-component. This can be used to ensure that all components work well together.

--y-q-r-code__core-theme

The CoreTheme, which will be apllied to the QRCode. For further information on themes visit the themes page.

--y-q-r-code__sub-theme

The subtheme subordinated to the previously specified CoreTheme, which will be apllied to the QRCode. For further information on themes visit the themes page.

--y-q-r-code__group-theme

The group theme is a further variation of the subtheme which is specified especially for variations of a component inside the subtheme. For further information on themes visit the Theme-Manager page.

DISPLAYread more
--y-q-r-code__display

This property specifies the display behavior of the component. This can be be set to:

  • none
  • block
  • flex
  • inline
--y-q-r-code__position

This property specifies the type of positioning method used for the component. This can be be set to:

  • static
  • relative
  • absolute
  • sticky
  • fixed
--y-q-r-code__visible

This property can toggle the visibility of the component. The two modes are completely hidden and fully shown.

SIZEread more
--y-q-r-code__min-width

The minimum value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
--y-q-r-code__min-height

The minimum value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
--y-q-r-code__width

The value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • auto
--y-q-r-code__height

The value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • auto
--y-q-r-code__max-width

The maximum value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • none
--y-q-r-code__max-height

The maximum value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • none
--y-q-r-code__flex

The flex property sets the length on flexible items. This sets the value in n-fold shares extrapolated to all other components with the flex display within the same container.

PLACEMENTread more
--y-q-r-code__margin-top

This property creates a space around the component, outside of the top border. This can be set in percent or pixels.

--y-q-r-code__margin-right

This property creates a space around the component, outside of the right border. This can be set in percent or pixels.

--y-q-r-code__margin-bottom

This property creates a space around the component, outside of the bottom border. This can be set in percent or pixels.

--y-q-r-code__margin-left

This property creates a space around the component, outside of the left border. This can be set in percent or pixels.

--y-q-r-code__padding-top

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

--y-q-r-code__padding-right

This property creates a space within the component, inside of the right border. This can be set in percent or pixels.

--y-q-r-code__padding-bottom

This property creates a space within the component, inside of the bottom border. This can be set in percent or pixels.

--y-q-r-code__padding-left

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Usage

In this section you will find a collection of application scenarios and examples that illustrate how to leverage the yQRCode in ways that deviate from its standard behavior, as defined by yBase. This section aims to inspire and guide you through various possibilities, helping you to implement more complex or unique functionalities tailored to your specific needs. General properties that are universally applicable can be found in the yBase usage section.

Variations

QRCode Elevated
Elevated
QRCode Flat
Flat
QRCode Outlined
Outlined
QRCode Rounded
Rounded
QRCode Plain
Plain
genericsizeminWidth120px
stylebackgroundbgColor__normal#44ddbb
styleshadowboxShadow__normal0 3px 6px 0 rgba(16, 18, 24, 0.2)
styleborderborderRadius8px
stylecodecode__color#FFFFFF

Style Variations

QRCode Red
Red QR Code
QRCode White
White QR Code
stylebackgroundbgColor#FF0000
stylecodecode__color#FFFFFF

Dynamic Content

The yQRCode also supports dynamic content, where the data encoded in the QR code can be updated in real-time based on user interactions or other events in the application.

Simple update

To set the yQRCode's value using JavaScript, access the value property within the Style > Code category. This method is ideal for changing the yQRCode's state based on user interactions or other events within your application.

Code example:

Button EvtClicked
// function onButton_2_EvtClicked (apiObject, component, eventData) {

let desiredString = "https://example.com";
let QRComponent = apiObject.ui.getObject(2, "y-qr-code");

QRComponent.set("style", "code", "code__value", desiredString);

//}

Dynamic update

Simply replace the desired string with the appropriate string or URL to a website that you would like to encrypt in the QRCode.

In the following more advanced example, a yInput named yInputUrl and a yQRCode named yQRCode are required. The content of the following code example can be run from any function that is triggered inside the page that contains those two components.

Input EvtChanged
// function onInput_3_EvtChanged (apiObject, component, eventData) {
// Retrieve the user input value from an input component
let urlValue = eventData.data;
const qrComponent = apiObject.ui.getObject(2, "y-qr-code");

// Check if the URL is not empty
if (urlValue.trim() !== "") {
// Update the QR Code component's content
qrComponent.set("style", "code", "code__value", urlValue);
console.log("QR Code updated with URL:", urlValue);
} else {
// Handle empty input, potentially showing an error or alert
console.error("URL input is empty. QR Code cannot be updated.");
}
//}

To link the yQRCode’s value with another component (e.g. a yInput), use the SourceLink Picker. This feature binds the yQRCode’s state to another component's value, allowing for integrated component behavior.

How to:

  1. Create a yQRCode component in your application.
  2. Create a new yInput aswell.
  3. Select the created yQRCode and open the Detail Panel.
  4. Within these settings, proceed to the Links section and open QrCode.
  5. Create a new SourceLink -> select the yInput you just created and choose input-string as an event.

Now each time you insert a url into the input, the image will render the picture behind this url. You can implement a validation in the yInput to make sure the string is in a format that you want, e.g. a valid URL.